<!--病人列表公共表格组件-->
<script setup lang="ts">
import { onMounted } from 'vue'
import { columnObj } from "@/views/doctorStation/component/patient/patientTable/index.ts";
import { PatientTableData } from "@/interface/doctorStation.ts";
import { patientList } from "@/views/doctorStation/mockData.ts";

defineOptions({
  name: 'PatientTable'
})

const props = defineProps({
  // 当前显示的table
  show: {
    type: String,
    default: 'consultation',
    validator(value: string) {
      // 就诊、候诊、转诊、已诊
      return ['consultation', 'waiting', 'referral', 'diagnosed'].includes(value)
    }
  }
})

function getRemoteData() {
  return new Promise<any[]>((resolve, reject) => {
    loading.value = true
    setTimeout(() => {
      // 模拟接口调用有概率出错
      if (Math.random() > 0.1) {
        resolve(patientList);
        loading.value = false
      } else {
        reject(new Error('不小心出错了！'));
        loading.value = false
      }
    }, 1000);
  });
}

onMounted(() => {
  console.log(`${props.show}初始化`);
  getRemoteData().then(res => {
    tableData.value = res;
  });
})

// 区分当前渲染的是哪个病人列表
const isConsultation = computed(() => props.show === 'consultation') // 就诊
const isWaiting = computed(() => props.show === 'waiting') // 候诊
const isReferral = computed(() => props.show === 'referral') // 转诊
const isDiagnosed = computed(() => props.show === 'diagnosed') // 已诊

const columns = computed(() => {
  return columnObj[props.show]
})

const tableData = ref<PatientTableData[]>([])
const loading = ref(false)

// 当前选择的行数据
const currentRow = ref<PatientTableData | null>(null)
// 表格操作按钮禁用状态
const isDisabled = computed(() => {
  return !currentRow.value
})

const handleCurrentChange = (row: PatientTableData | null) => {
  currentRow.value = row
  console.log(`当前选择的行:`, row)
}

// 已诊列表过滤参数
const searchDate = ref(''); // 选择的日期
const patientName = ref(''); // 病人
const doctorSelect = ref(''); // 选择的医生

// 医生下拉列表
const doctorList = [
  {
    value: 0,
    label: '张国胜'
  },
  {
    value: 1,
    label: '成龙'
  },
  {
    value: 2,
    label: '周杰伦'
  },
  {
    value: 3,
    label: '汪苏泷'
  },
  {
    value: 4,
    label: '李振'
  }
]

</script>

<template>
<div class="patientTable height-100 flex-1 min-height-0 flex flex-column">
  <div class="btn-list">
    <el-button type="primary" plain>挂号</el-button>
    <!-- 候诊操作 -->
    <template v-if="isWaiting">
      <el-button type="primary" plain :disabled="isDisabled">转诊病人</el-button>
      <el-button type="primary" plain :disabled="isDisabled">强制续诊</el-button>
      <el-button type="primary" plain :disabled="isDisabled">病人接诊</el-button>
    </template>

    <!-- 转诊操作 -->
    <template v-if="isReferral">
      <el-button type="primary" plain :disabled="isDisabled">转诊接受</el-button>
      <el-button type="primary" plain :disabled="isDisabled">转诊拒绝</el-button>
      <el-button type="primary" plain :disabled="isDisabled">强制续诊</el-button>
    </template>

    <!-- 就诊操作 -->
    <template v-if="isConsultation">
      <el-button type="primary" plain :disabled="isDisabled">转诊病人</el-button>
      <el-button type="primary" plain :disabled="isDisabled">强制续诊</el-button>
      <el-button type="primary" plain :disabled="isDisabled">取消接诊</el-button>
      <el-button type="primary" plain :disabled="isDisabled">完成接诊</el-button>
    </template>

    <!-- 已诊操作 -->
    <template v-if="isDiagnosed">
      <el-button type="primary" plain :disabled="isDisabled">恢复接诊</el-button>
      <el-button type="primary" plain>查找</el-button>

      <div class="flex ac mb10">
        <span class="mr10">日期</span>
        <el-date-picker
          v-model="searchDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </div>

      <div class="flex ac jsb mb10">
        <span>医生</span>
        <el-select v-model="doctorSelect" placeholder="请选择医生" style="width: 150px">
          <el-option
            v-for="item in doctorList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <span>病人</span>
        <el-input placeholder="请输入病人姓名" v-model="patientName" style="width: 150px"></el-input>
      </div>

    </template>
  </div>
  <div class="flex-1 min-height-0">
    <sTable
      v-loading="loading"
      class="width-100"
      :columns="columns"
      :tableData="tableData"
      :hasPage="true"
      size="small"
      :page="{
        pageNumber: 1,
        pageSize: 10,
        total: 20,
       }"
      @current-change="handleCurrentChange"/>
  </div>
</div>
</template>

<style scoped lang="scss">
.patientTable {
  .btn-list .el-button {
    margin-bottom: 10px;
  }
}
</style>
